<template>
  <div class="form-container">
    <el-form :model="moduleForm" :rules="rules" ref="moduleForm" label-width="100px" class="demo-form">
      <el-form-item label="模块编号" prop="sort">
        <el-input v-model.number="moduleForm.sort"></el-input>
      </el-form-item>
      <el-form-item label="模块名称" prop="name">
        <el-input v-model="moduleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="模块编码" prop="code">
        <el-input v-model="moduleForm.code"></el-input>
      </el-form-item>
      <el-form-item label="模块url" prop="url">
        <el-input v-model="moduleForm.url"></el-input>
      </el-form-item>
      <el-form-item label="模块picUrl" prop="picUrl">
        <el-input v-model="moduleForm.picUrl"></el-input>
      </el-form-item>
      <el-form-item label="模块类型" prop="type">
        <el-select v-model="moduleForm.type" disabled  placeholder="请选择模块类型">
          <el-option :label="item.label" :value="item.value" v-for="(item , index) in moduleEnum" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="模块描述" prop="des">
        <el-input type="textarea" v-model="moduleForm.des"></el-input>
      </el-form-item>
      <el-form-item label="pid" prop="pid">
        <el-input v-model="moduleForm.pid" :disabled="true"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel" class="cancel-btn function-btn">取  消</el-button>
      <el-button type="primary" @click="sure('moduleForm')" class="function-btn">确  定</el-button>
    </div>
  </div>
</template>

<script>
import Config from '../../../../config'
export default {
  name: 'createModule',
  props: {
    form: {
      type: Object,
      default: function () {
        return {
          sort: 0,
          name: '',
          code: '',
          url: '',
          picUrl: '',
          type: 1,
          des: '',
          pid: ''
        }
      }
    },
    title: {
      type: String,
      default: ''
    }
  },
  watch: {
    form (val) {
      this.moduleForm = JSON.parse(JSON.stringify(val))
    }
  },
  data () {
    return {
      moduleEnum: [
        {
          label: '父模块',
          value: 1
        },
        {
          label: '子模块',
          value: 0
        }
      ],
      MODULE_INSERT: '模块新增',
      MODULE_EDIT: '模块编辑',
      moduleForm: JSON.parse(JSON.stringify(this.form)),
      rules: {
        sort: [
          { required: true, message: '请填写模块编号', trigger: 'blur' },
          {type: 'number', message: '模块编号必须为数字值', trigger: 'blur'}
        ],
        name: [
          { required: true, message: '请填写模块名称', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请填写模块编码', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择模块类型', trigger: 'change' }
        ],
        des: [
          { required: true, message: '请填写模块描述', trigger: 'blur' }
        ],
        pid: []
      }
    }
  },
  methods: {
    cancel () {
      this.$emit('hide', 'cancel')
    },
    sure (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.save()
        } else {
          this.$message(
            {
              message: '格式不正确',
              type: 'warning'
            }
          )
          return false
        }
      })
    },
    /**
     * 保存数据
     * */
    save () {
      let url = ``
      if (this.title === this.MODULE_INSERT) {
        url += `${Config.AUTH_URL}/menu/insert`
      } else {
        url += `${Config.AUTH_URL}/menu/update`
      }
      const param = this.moduleForm
      this.$http.post(url, param)
        .then(data => {
          console.log(data)
          this.$emit('hide', true)
        })
        .catch(e => {
          this.$emit('hide', false)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
  .form-container {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
    .demo-form {
      width: 340px;
    }
    .dialog-footer {
      height: 28px;
      text-align: center;
      margin-top: 30px;
      .el-button {
        padding: 7px 27px;
      }
    }
  }
</style>
